<template>
	<!-- 定义一个空的view容器，用于放置轮播图 -->
	<view class="">
		<!-- swiper组件用于创建轮播图，设置高度、自动播放、播放间隔和动画持续时间 -->
		<swiper style="height: 200px;" :indicator-dots="true" :autoplay="true" :interval="3000" :duration="1000">
			<!-- 使用v-for循环渲染轮播图的每一项 -->
			<swiper-item v-for="(item,index) in lunboList">
				<view class="swiper-item">
					<!-- image组件用于显示轮播图的图片 -->
					<image :src="item.url" mode="" style="width: 100%;"></image>
				</view>
			</swiper-item>
		</swiper>
	</view>

	<!-- 定义一个view容器，用于放置分类标签 -->
	<uni-section title="大美中国之《舌尖上的美味中国》" type="line" titleFontSize="18px" padding>
		<view class="category-tabs">
			<!-- 为每个分类创建一个view，设置点击事件和激活状态的样式   使用组件，创建分类标签每个标签都有点击事件和激活状态的样式-->
			<view :class="{'active': currentCategory === 'history'}" @click="currentCategory = 'history'">大美中国</view>
			<view :class="{'active': currentCategory === 'food'}" @click="currentCategory = 'food'">美味中国</view>
			<view :class="{'active': currentCategory === 'explore'}" @click="currentCategory = 'explore'">金牌向导</view>
			<view :class="{'active': currentCategory === 'specialties'}" @click="currentCategory = 'specialties'">当地特产
			</view>
		</view>
	</uni-section>
	<!-- 定义一个view容器，用于根据当前分类显示内容  根据currentCategory的值，使用v-for循环渲染当前分类的每一项内容-->
	<view class="category-content" v-if="currentCategory">
		<!-- 使用v-for循环渲染当前分类的每一项内容 -->
		<view class="item" v-for="(item, index) in currentCategoryData" :key="index"
			@tap="toDetails(item.objectId,item.type)">
			<!-- image组件用于显示内容的图片  每一项内容包含一个图片和一个标题。 -->
			<image :src="item.img" mode="aspectFill" class="item-image"></image>
			<view class="item-info">
				<!-- 显示内容的标题 -->
				<view class="item-title">{{ item.name }}</view>
				<view class="intro">{{item.intro}}</view>
				<!-- 文字内容可以根据实际情况添加 -->
			</view>
		</view>
	</view>
</template>

<script setup>
	// 导入Vue的响应式API
	import {
		ref,
		computed
	} from 'vue'
	// 导入uni-app的生命周期钩子
	import {
		onLoad
	} from '@dcloudio/uni-app'
	// 导入配置文件
	import {
		CONFIG
	} from '../../utils/config.js'
	// 导入状态管理库
	import {
		userStore
	} from '../../store/userStore';
	let store = userStore()
	// 在页面加载时执行的函数，用于初始化数据
	onLoad(() => {
		getLunbo() // 获取轮播图数据
		gethistorys("1") // 获取风景数据
		getFoods("2") // 获取美食数据
		getExplores("3") // 获取名人数据
		getspecialties("4") // 获取特产数据
	})
	// 定义一个函数，用于跳转到详情页面toDetails函数用于跳转到详情页面。
	function toDetails(id) {
		uni.navigateTo({
			url: "/pages/playinChinaDetails/playinChinaDetails?id=" + id
		})
	}
	// 定义一个响应式变量，用于存储轮播图数据
	let lunboList = ref([])
	// 定义一个异步函数，用于获取轮播图数据
	async function getLunbo() {
		let res = await uni.$get(CONFIG.leancloud_url + "/1.1/classes/meishilunbo")
		lunboList.value = res.results.map(item => {
			item.url = item.url.trim()
			return item
		})
		console.log(lunboList.value)
	}
	// 定义一个响应式变量，用于存储当前分类  定义响应式变量存储轮播图数据、风景数据、美食数据、名人数据和特产数据。
	const currentCategory = ref('history'); // 默认显示名胜古迹
	// 定义一个计算属性，用于根据当前分类返回对应的数据
	const currentCategoryData = computed(() => {
		switch (currentCategory.value) {
			case 'history':
				return historys.value;
			case 'food':
				return foods.value;
			case 'explore':
				return explores.value;
			case 'specialty':
				return specialties.value;
			default:
				return specialties.value;
		}
	});
	// 定义一个响应式变量，用于存储风景数据定义异步函数getLunbo、gethistorys、getFoods、getExplores和getspecialties用于从服务器获取数据
	let historys = ref([])
	// 定义一个异步函数，用于获取风景数据 
	async function gethistorys(type) {
		let data = {
			"type": type
		}
		let ed = encodeURI(JSON.stringify(data))
		let res = await uni.$get(CONFIG.leancloud_url + "/1.1/classes/ChinaPlayItem?where=" + ed)
		console.log(res)
		historys.value = res.results
	}

	// 定义一个响应式变量，用于存储美食数据
	let foods = ref([])
	// 定义一个异步函数，用于获取美食数据
	async function getFoods(type) {
		let data = {
			"type": type
		}
		let ed = encodeURI(JSON.stringify(data))
		let res = await uni.$get(CONFIG.leancloud_url + "/1.1/classes/ChinaPlayItem?where=" + ed)
		console.log(res)
		foods.value = res.results
	}
	// 定义一个响应式变量，用于存储名人数据
	let explores = ref([])
	// 定义一个异步函数，用于获取名人数据
	async function getExplores(type) {
		let data = {
			"type": type
		}
		let ed = encodeURI(JSON.stringify(data))
		let res = await uni.$get(CONFIG.leancloud_url + "/1.1/classes/ChinaPlayItem?where=" + ed)
		console.log(res)
		explores.value = res.results
	}
	// 定义一个响应式变量，用于存储特产数据
	let specialties = ref([])
	// 定义一个异步函数，用于获取特产数据
	async function getspecialties(type) {
		let data = {
			"type": type
		}
		let ed = encodeURI(JSON.stringify(data))
		let res = await uni.$get(CONFIG.leancloud_url + "/1.1/classes/ChinaPlayItem?where=" + ed)
		console.log(res)
		specialties.value = res.results
	}
</script>

<style>
	.intro {
		text-indent: 1em;
		padding: 0 15rpx 0 15rpx;
		font-size: 30rpx;
		color: #666;
		overflow: hidden;
		-webkit-line-clamp: 2;
		text-overflow: ellipsis;
		display: -webkit-box;
		-webkit-box-orient: vertical;
	}

	/* 定义分类标签的样式 */
	.category-tabs {
		display: flex;
		justify-content: space-around;
		padding: 10px;
		background-color: #fa436a;
	}

	.category-tabs view {
		border: 1px solid #fa436a;
		border-radius: 10px;
		background-color: white;
		flex: 1;
		text-align: center;
		padding: 10px;
		cursor: pointer;
		transition: background-color 0.3s;
	}

	.category-tabs view.active {
		border: 1px solid #0eb0c9;
		border-radius: 10px;
		background-color: gold;
		color: #fff;
		font-style: italic;
		font-weight: bold;
	}

	/* 定义内容项的样式 */
	.category-content {
		display: flex;
		flex-wrap: wrap;
		justify-content: center;
		padding: 10px;
	}

	.item {
		width: 48%;
		/* 两列布局 */
		margin-bottom: 10px;
	}

	.item-image {
		width: 160px;
		height: 200px;
		/* object-fit: cover; */
		border-radius: 8px;
		/* 圆角边框 */
		margin-right: 5px;
	}

	.item-info {
		margin: 5px;
		width: 100%;
		text-align: center;
		padding: 5px;
	}

	.item-title {
		font-size: 16px;
		font-weight: bold;
		margin-right: 25px;
	}
</style>